<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist - 副本/css/bootstrap-theme.css" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				height: 100%;
				width: 100%;
			}
			section{
				margin-left: 73px;
				margin-right: 65px;
			}
			.header{
				width: 1372px;
				height: 39px;
				line-height: 39px;
				background-color: #f4f4f4;
				/*border: 1px solid black;*/
			}
			a{   
				text-decoration: none;
			}
			li{
				display: inline-block;
			}
			.header a{
				color: #969696;
			}
			.header .ul-left{
				float: left;
				
				width: 330px;
				/*margin-left: 73px;*/
			}
			.header .ul-right{
				float: right;
				
				width: 470px;
				margin-right: 65px;
				/*margin-left: 300px;*/
				
			}
			.blue{
				padding:0 5px;
				border: 1px solid #00b7d6;
				background-color: white;
				line-height: 25px;
				box-sizing: border-box;
			    height: 25px;
			}
			.blue>a{
				margin: auto 5px;
				color: #00b7d6;
			}
			.qie,.tou,.arrow,.weixin,.money{
				/*margin:auto 5px;*/
				vertical-align: text-top;
				display:inline-block ;
				height: 20px;
				width: 20px;
			    background-image: url(img/headerico.png); 
			    
			}
			.qie{
				background-position-y:0px;
			}
			.tou{
				background-position-y:-58px;
			}
			.arrow{
				width: 15px;
				background-position-y:-120px;
			}
			.money{
				background-position-y:-60px;
			}
			.weixin{
				width: 25px;
				background-position-y:-768px;
			}
			#weixin{
				border: 1px solid #3ebb2b;
				
			}
			#weixin>a{
				color: #3ebb2b;
			}
			.grey{
				margin-right: 28px;
			}
			#nav {
				width:1372px ;
				height: 87px;
				line-height: 87px;
				display: block;
			}
			
			#nav ul li a{
				color:#666666;
				font-size: 18px;
			}
			.daohang{
				  margin-left: 52px;
				  cursor: pointer;
			}
			
			.active{
				margin-left: 52px;
				cursor: pointer;
				color:#ff6c00 ;
			}
			.logo{
				vertical-align: middle;
				display:inline-block ;
				height: 60px;
				width: 143px;
			    background-image: url(img/public_v8.png); 
			    /*background-position-y: ;*/
			}
			.tequan{
				vertical-align: text-top;
				display:inline-block ;
				height: 10px;
				width: 20px;
			    background-image: url(img/public_v8.png);
			     background-position-y: -240px; 
			}
			.hot{
				vertical-align: text-top;
				display:inline-block ;
				height: 15px;
				width: 30px;
			    background-image: url(img/public_v8.png);
			     background-position:-27px  -237px; 
			}
			#bigimage{
				margin: 0;
				width: 1372px;
				height:161px ;
				background-image: url(img/indexbg.jpg);
				background-size: cover;
				text-align: center;
				padding-top:31px ;
				box-sizing: border-box;
			}
			.text{
				font-size: 34px;
				color: white;
				line-height: 34px;
			}
			#input{
				width: 590px;
				height: 49px;
				font-size: 16px;
				padding-left: 21px;
			}
			.div-btn{
				/*color: white;*/
				margin-top: 23px ;
				/*margin-bottom: 27px ;*/
			}
			#btn1{
			    color: white;
				height:49px ;
				width: 100px;
				background-color: #3EBB2B;
			}
			#btn2{

				color: white;
				height:49px ;
				width: 100px;
				background-color: #ff782f;
			}
			#container{
				margin: 0;padding: 0;
				width: calc(1200px * 5.1);
				overflow: hidden;
				/*height: ;*/
			}
			#container img{
				margin: 0;
				padding: 0;
				display: inline-block;
				width: 1200px;
				height: 340px;
			}
			#mulu{
				width: 1200px;
				margin-top: 10px;
			}
			.index{
				 height: 59px;width: 147px;
				 line-height: 59px;
				 font-size: 20px;
				 text-align: center;
				 opacity: 0.5;
				 margin-left: 10px;
			}
			.index li:first-of-type{
				margin-left: 0px;
			}
			#content-left{
				width: 718px;
				
				
			}
			#content-left th{
				display: flex;
				text-decoration: none;
				list-style: none;
				border: 0;
				
			}
			#content-left tr{
				text-decoration: none;
				list-style: none;
				border: 0;
				
			}
			#content-left td{
				text-decoration: none;
				border: 0;
				width: 100px;
				list-style: none;
			}
		</style>
	</head>
	<body>
		<main>
			
			<header class="header">
				<section>
				<ul class="ul-left">
					<li class="blue"><span class="qie"></span><a href="##">QQ交谈</a></li>
					<li class="blue"><span class="tou"></span><a href="##">官方QQ群</a><span class="arrow"></span></li>
					<li><a href="##">常见问题</a></li>
				</ul>
			  
			 <ul class="ul-right">
			 	<li class="grey"><span class="money"></span><a href="##">点我赚钱</a></li>
			 	<li class="grey"><a href="##">注册</a></li>
			 	<li class="grey"><a href="##">登录</a></li>
			 	<li class="blue"><span class="qie"></span><a href="##">QQ登录</a></li>
			 	<li id="weixin" class="blue"><span class="weixin"></span><a href="##">微信登录</a></li>
			 </ul>
			</section> 
			
			
			 
			</header>
			 <section id="nav">
			 	<ul>
					<li><span class="logo"></span></li>
					<li style="color:#ff6c00;margin-left: 53px;" <a href="##">首页</a></li>
					<li class="daohang" <a href="##">原创设计</a></li>
					<li class="daohang" <a href="##">广告设计</a></li>
					<li class="daohang" <a href="##">淘宝设计</a></li>
					<li class="daohang" <a href="##">素材分类</a></li>
					<li class="daohang" <a href="##">千图灵感</a></li>
					<li class="daohang" <a href="##">设计工具</a></li>
					<li class="daohang" <a href="##">活动</a><span class="hot"></span></li>
					<li class="daohang" <a href="##">VIP特权</a><span class="tequan"></span></li>
				</ul>
			 </section>
			
				
			
			
			<section id="bigimage">
				  <div class="text">专业免费设计素材网站</div>
				  <div class="div-btn">
				  	<input type="text" id="input"  placeholder="800万张设计素材免费下载"/>
				     <input type="button" name="btn1" id="btn1" value="" placeholder="搜全站" />
				     <input type="button" name="btn2" id="btn2" value="" placeholder="搜原创" />
				  	</div>
			</section>
			
			<section id="lunbo">
				
				
				<div id="container">
					<img src="img/58c5fc9d3955f.png"/>
					<!--<img src="img/58ff15bbc8d49.jpg"/>
					<img src="img/591197954c14f.png"/>
					<img src="img/59126760bb15f.jpg"/>
					<img src="img/591516a77cae0.png"/>-->
				</div>

				
				
			</section>
			
			<section id="mulu">
				<ul>
					<li class="index" style="background-color: ;><a href="##" color:#83af9c ;">原创专区</a></li>
					<li class="index" style="background-color: ;color:#99805e ;"><a href="##">平面广告</a></li>
					<li class="index" style="background-color: ;color:#b97748;"><a href="##">电商淘宝</a></li>
					<li class="index" style="background-color: ;color:#6797d1 ;"><a href="##">PPT/文库</a></li>
					<li class="index" style="background-color: ;color:#83a87f;"><a href="##">摄影图库</a></li>
					<li class="index" style="background-color: ;color:#488da3 ;"><a href="##">网络UI</a></li>
					<li class="index" style="background-color: ;color:#869573 ;"><a href="##">视频/音频</a></li>
				</ul>
			</section>
			
			
			<section id="content">
				<div id="content-left">
					
					<table border="" cellspacing="" cellpadding="">
						<th>
							<td>热门</td>
							<td>用途</td>
							<td>背景</td>
							<td>元素</td>
						</th>
						<tr>
							<td>荷花</td>
							<td>icon</td>
							<td>图标</td>
							<td>背景墙</td>
							<td>招聘</td>
						</tr>
						<tr>
							<td>样机</td>
							<td>PPT</td>
							<td>LOGO</td>
							<td>中国风</td>
							<td>个人简历</td>
						</tr>
						<tr>
							<td>科技</td>
							<td>母亲节</td>
							<td>西瓜</td>
							<td>主图</td>
							<td>旅游</td>
						</tr>
						<tr>
							<td>手绘</td>
							<td>装饰画</td>
							<td>520</td>
							<td>泼水节</td>
							<td>底纹</td>
						</tr>
						<tr>
							<td>中国风</td>
							<td>企业文化</td>
							<td>开门红</td>
							<td>画册</td>
							<td>蓝色背景</td>
						</tr>
						<tr>
							<td>卡通</td>
							<td>水墨</td>
							<td>边框</td>
							<td>婚礼</td>
							<td>网页</td>
						</tr>
					</table>
				</div>
				<div id="content-right"></div> 
			</section>
		</main>
	</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/qiantu.js"></script>
